<template>
<div class="div">
    <div>
        <el-row>
            <!-- 左侧 -->
            <el-col :span="10">
                <div class="clock">
                    <el-card shadow="hover">
                        <clock-bar/>
                    </el-card>
                </div>
                <div>
                    <el-card shadow="hover" class="box-card">
                        <div slot="header" class="clearfix">
                            <span>通知</span>
                            <el-button @click="notice()" style="float: right; padding: 3px 0" type="text">通知详情</el-button>
                        </div>
                        <div v-for="item in noticeData" :key="item.index" class="text item">
                            <div class="title">
                                <div class="point"></div>
                                {{item.title}}
                            </div>
                            <div class="date">
                                {{item.date}}
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-col>
            <!-- 右侧 -->
            <el-col :span="14">
                <div class="card">
                    <el-card v-for="item in incomeData" :key="item.index" shadow="hover" class="income">
                        <div class="border" >
                            <h1 :style="{color: item.color}">{{item.time}}</h1>
                        </div>
                        <div class="detail">
                            <p class="annotation" :style="{color: item.color}">当前分类总记录数</p>
                            <p class="money" >{{item.money}}</p>
                        </div>
                    </el-card>
                </div>
               <div class="dd">
                <div style="padding-top: 30px;">
                  <echarts/>
                </div>
               </div>
               
            </el-col>
        </el-row>
    </div>
  </div>
</template>

<script>
import ClockBar from './ClockBar.vue'
import echarts from './echartswq.vue'
    export default {

        name: 'Home',
        data () {
            return {
                noticeData: [
                  {title:"关于开展核实部门虚假消费报销工作",date:"2022-8-03"},
                  {title:"公司全体人员假期防疫工作",date:"2022-6-13"},
                  {title:"2022年隆胸部门新招试验品共20名",date:"2022-9-12",time:"浏览统计",money:"100"},
                  {title:"恭喜美容部王少博获得本季度最佳员工领导奖",date:"2022-11-19",time:"订单统计",money:"40"},
                ],
                incomeData: [
                  {time:"用户统计",money:"30",color:"#409EFF"},
                  {time:"商品统计",money:"20",color:"#67C23A"},
                  {time:"浏览统计",money:"100",color:"#E6A23C"},
                  {time:"订单统计",money:"40",color:"#F56C6C"},
                ],
                departmentData: []
            }
        },
        components: {
            ClockBar,
            echarts
        },
        methods: {
            notice() {
                console.log("通知");
                this.$router.push('/notice')
            }
        },
        mounted() {
            this.$axios.get('/home/getData').then(res => {
                const { code, data } = res.data
                if (code === 200) {
                    this.incomeData = data.incomeData
                    this.departmentData = data.departmentData
                }
                console.log(res)
            }),
            this.$axios.get('/notice/getData').then(res => {
                const { code, data } = res.data
                if (code === 200) {
                    this.noticeData = data.noticeList
                }
                console.log(res)
            })
        }
    }
</script>

<style scoped>
@import "../css/home.css";
.div{
  width: 100%;
  height: 100%;
  background-color: whitesmoke;
  position: relative;
}
.dd{
  width: 710px;
  height: 390px;
  background-color: white;
  
}
</style>